<template>
	<div style="display: none"></div>
</template>
<script setup lang="ts">
	import {createVNode, watch} from 'vue'
	import {ExclamationCircleOutlined} from '@ant-design/icons-vue'
	import {Modal} from 'ant-design-vue'

	const props = defineProps({
		visible: {
			type: Boolean,
			required: true
		}
	})
	const emit = defineEmits(['update:visible', 'success'])
	const cancel = () => {
		emit('update:visible', false)
	}
	watch(
		() => props.visible,
		(newVal: boolean) => {
			if (newVal) {
				Modal.confirm({
					title: '重置',
					icon: createVNode(ExclamationCircleOutlined),
					content: '重置后产生的账单会被清除，请确认是否继续重置？',
					centered: true,
					onOk() {
						emit('success')
						cancel()
					},
					onCancel() {
						cancel()
					}
				})
			}
		}
	)
</script>
